<template>
  <div class="product-container">
    <!-- Product Preview Section -->
    <div class="product-preview-section">
      <div class="product-gallery">
        <div class="main-image" 
          @mousemove="handleImageZoom"
          @mouseleave="resetZoom"
          ref="imageContainer">
          <img :src="currentImage" alt="Product Image" ref="productImage">
          <div class="zoom-window" v-show="isZooming" :style="zoomStyle"></div>
        </div>
        <div class="thumbnail-list">
          <img 
            v-for="(img, index) in productImages" 
            :key="index"
            :src="img"
            :class="{ active: currentImage === img }"
            @click="currentImage = img"
            alt="Product Thumbnail"
          >
        </div>
      </div>

      <!-- Product Info Section -->
      <div class="product-info">
        <h1>Toys for 3-12 Year Old Boys Girls, Walkie Talkies for Kids</h1>
        <div class="price">$59.00</div>
        <div class="description">
          <p>22 Channels 2 Way Radio Toy with Backlit LCD Flashlight, 3 Miles Range for Outside, Camping, Hiking</p>
          <ul class="features">
            <li>3 Miles Long Range Communication</li>
            <li>Crystal Clear Sound Quality</li>
            <li>22 Channels Available</li>
            <li>Built-in LED Flashlight</li>
            <li>Ergonomic Design for Kids</li>
          </ul>
        </div>
        
        <div class="purchase-section">
          <el-input-number 
            v-model="quantity" 
            :min="1" 
            :max="99"
            size="large"
            class="quantity-input"
          />
          <!-- <el-button 
            type="warning" 
            size="large"
            @click="addToCart"
          >
            <el-icon><ShoppingCart /></el-icon>
            Add to Cart
          </el-button> -->
          <el-button 
            type="danger" 
            size="large"
            @click="buyNow"
          >
            <el-icon><Shop /></el-icon>
             Buy Now
          </el-button>
        </div>
      </div>
    </div>

    <!-- Product Details Section -->
    <div class="product-details">
      <div class="detail-images">
        <img v-for="i in 8" 
          :key="i" 
          :src="detailImages[i - 1]" 
          :alt="`Product Detail ${i}`">
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ShoppingCart, Shop } from '@element-plus/icons-vue'

// 引入图片
import drone1 from '@/assets/images/drone1.jpg'
import drone2 from '@/assets/images/drone2.jpg'
import drone3 from '@/assets/images/drone3.jpg'
import drone4 from '@/assets/images/drone4.jpg'

const router = useRouter()
const quantity = ref(1)
const isZooming = ref(false)
const imageContainer = ref<HTMLElement | null>(null)
const productImage = ref<HTMLElement | null>(null)
const zoomStyle = reactive({
  backgroundImage: '',
  backgroundPosition: '0% 0%',
  backgroundSize: '250%',
  backgroundRepeat: 'no-repeat',
  left: '105%',
  top: '0',
})

const currentImage = ref(drone1)
const productImages = [
  drone1,
  drone2,
  drone3,
  drone4
]

const detailImages = Array.from({ length: 8 }, (_, i) => {
  return new URL(`../../assets/images/drone${i + 1}.jpg`, import.meta.url).href
})

const handleImageZoom = (event: MouseEvent) => {
  if (!imageContainer.value || !productImage.value) return
  
  const rect = imageContainer.value.getBoundingClientRect()
  const x = ((event.clientX - rect.left) / rect.width) * 100
  const y = ((event.clientY - rect.top) / rect.height) * 100
  
  zoomStyle.backgroundImage = `url(${currentImage.value})`
  zoomStyle.backgroundPosition = `${x}% ${y}%`
  isZooming.value = true
}

const resetZoom = () => {
  isZooming.value = false
}

const decreaseQuantity = () => {
  if (quantity.value > 1) quantity.value--
}

const increaseQuantity = () => {
  quantity.value++
}

const addToCart = () => {
  // Implement cart logic
}

const buyNow = () => {
  router.push('/order/confirm')
}
</script>

<style scoped>
.product-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.product-preview-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 4rem;
}

.product-gallery {
  position: relative;
}

.main-image {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: visible;
  border: 1px solid #eee;
  border-radius: 8px;
}

.main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zoom-window {
  position: absolute;
  width: 400px;
  height: 400px;
  border: 1px solid #eee;
  background-color: #fff;
  pointer-events: none;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.thumbnail-list {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.thumbnail-list img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.thumbnail-list img.active {
  border-color: #1a73e8;
}

.product-info {
  padding: 1rem;
}

.product-info h1 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #333;
}

.price {
  font-size: 2rem;
  color: #e53935;
  margin-bottom: 1.5rem;
}

.description {
  color: #666;
  margin-bottom: 2rem;
}

.features {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.features li {
  margin-bottom: 0.5rem;
}

.purchase-section {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 2rem;
}

.quantity-input {
  width: 150px;
}

.product-details {
  margin-top: 4rem;
}

.detail-images {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.detail-images img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .product-preview-section {
    grid-template-columns: 1fr;
  }
}
</style>
